说明

本文转自菜鸟教程。

AJAX简介

AJAX是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。AJAX的全称是Asynchronous JavaScript and XML，即异步JavaScript和XML，通过JQuery AJAX方法，您能够使用HTTP Get和HTTP Post从远程服务器上请求文本、HTML、XML或JSON。

AJAX load()方法

load()方法从服务器加载数据，并把返回的数据放入被选元素中。其语法如下：

1
$(selector).load(URL, data, callback);

其中，必须的URL表示希望加载的URL，可选的data参数规定与请求一同发送的查询字符串键/值对集合，可选的callback参数是load()方法完成后所执行的函数名称。

看下面这个例子：

首先由这样一个文件demo_test.txt：

1
2
<h2>jQuery AJAX 是个非常棒的功能！</h2>
<p id="p1">这是段落的一些文本。</p>

通过load()方法将demo_test.txt中的内容加载到指定的元素中：

1
$("#div1").load("/try/ajax/demo_test.txt");

也可以把JQuery选择器添加到URL参数，下面的例子将demo_test.txt文件中id=p1的元素的内容加载到指定的元素：

1
$("#div1").load("/try/ajax/demo_test.txt #p1");

可选的callback参数规定当load()方法完成后所要运行的回调函数，回调函数可以设置不同的参数：

  • responseTxt：包含调用成功时的结果内容
  • statusTxt：包含调用的状态
  • xhr：包含XML HttpRequest对象

看下面这个例子：

1
2
3
4
5
6
7
8
9
10
$("button").click(function() {
  	$("#div1").load("/try/ajax/demo_test.txt", function(responseTxt, statusTxt, xhr) {
      	if (statusTxt == "success") {
          	alert("外部内容调用成功");
      	} 
		if (statusTxt == "error") {
        	alert("Error: " + xhr.status + ": " + xhr.statusText);  
		}
  	});
});

AJAX get()和post()

get()和post()用于通过HTTP GET或POST请求从服务器请求数据。

HTTP请求

  • GET：从指定的资源请求数据
  • POST：向指定的资源提交要处理的数据

JQuery $.get()方法

$.get()方法通过HTTP GET请求从服务器上请求数据，其语法格式如下：

1
$.get(URL, callback);

必须得URL参数规定希望请求的URL，可选的callback参数是请求成功后所执行的函数名，举个例子：

1
2
3
4
5
$("button").click(function() {
  	$.get("demo_test.php", function(data, status) {
      	alert("数据：" + data + "\n状态：" + status);
  	});
});

$.get()的第一个参数是我们希望请求的URL，第二个参数是回调函数，第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

JQuery $.post()方法

$.post()方法通过HTTP POST请求从服务区上请求数据，其语法如下：

1
$.post(URL, data, callback);

必须的URL参数规定您希望请求的URL，可选的data参数规定连同请求发送的数据，可选的callback参数是请求成功后所执行的函数名。举个例子如下：

1
2
3
4
5
6
7
8
9
10
$("button").click(function() {
  	$.post("/try/ajax/demo_test_post.php",
	{
      	name: "百度"
		url: "www.baidu.com"
	},
	function(data, status) {
      	alert("数据：\n" + data + "\n状态：" +  status);
	});
});